<template>
  <div >
    <sticky-top>
      <div class="title">
        <span>创建</span>
        <span class="back" @click="back"><i class="iconfont icon-fanhui" />返回</span>
        <el-divider></el-divider>
      </div>
    </sticky-top>
    <div class="main">
      <el-row :lg="16" :md="20" :sm="24" :xs="24">
        <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent v-loading="loading">
          <el-form-item label="校区名称" prop="CampusName">
            <el-input size="medium" v-model="form.CampusName" placeholder="请填写校区名称"></el-input>
          </el-form-item>
          <el-form-item label="校区地址" prop="Address">
            <el-input size="medium" v-model="form.Address" placeholder="请填写校区地址"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="Longitude">
            <el-input size="medium" v-model="form.Longitude" placeholder="请填写经度"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <el-input size="medium" v-model="form.latitude" placeholder="请填写纬度"></el-input>
          </el-form-item>
<!--          <el-form-item label="是否启用">-->
<!--            <el-switch-->
<!--              size="medium"-->
<!--              v-model="saled"-->
<!--              active-color="#13ce66"-->
<!--              inactive-color="#ff4949"-->
<!--              active-text="启用"-->
<!--              inactive-text="停用"-->
<!--            ></el-switch>-->
<!--          </el-form-item>-->
          <el-form-item label="Logo" prop="Logo">
            <upload-imgs :max-num="1" ref="uploadEle" :value="initData"/>
          </el-form-item>
          <el-form-item label="富文本描述" prop="Describe">
            <tinymce-editor :default-content="form.Describe"  @change="change" />
          </el-form-item>
          <el-form-item class="submit">
            <el-button @click="submitForm('form')" type="primary">保存</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import UploadImgs from '@/components/base/upload-image/index'
import TinymceEditor from '@/components/base/tinymce/index'
import Campus from '@/model/campus'

export default {
  name: 'campus-edit',
  components: { TinymceEditor, UploadImgs },
  props: {
    isCreate: {
      type:Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      form: {
        CampusName:'',
        Address :'',
        Longitude:'',
        latitude:'',
        Logo: null,
        Describe: null,
        // Status:1,
      },
      // saled: true,
      initData: [],
      loading:false,
    }
  },
  watch: {
    // saled(val) {
    //   this.form.Status = val ? 1 : 0
    // },
  },
  async mounted () {
    if (!this.isCreate) {
      try {
        this.loading = true
        const res = await Campus.getDetail(this.id)
        this.loading = false
        this.form = res
        const initData = [{
          id:res.ID,
          display: res.Logo,
        }]
        // this.saled = res.Status === 1
        this.initData = initData
      } catch (e) {
        this.loading = false
      }

    }
  },
  methods: {
    // 富文本内容
    change(val) {
      this.form.Describe = val
    },
    // 表单其他内容
    async getValue () {
      const val = await this.$refs.uploadEle.getValue()
      if (val && val.length > 0){
        this.form.Logo = val[0].display
      }
    },
    async submitForm (formName) {
      await this.getValue()
      const postData = { ...this.form }
      let res
      try {
        this.loading = true
        if (this.isCreate) {
          res = await Campus.create(postData)
        } else {
          res = await Campus.updata(postData)
        }
        this.loading = false
        this.$message.success('成功')
        this.$confirm('成功是否返回上一页', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(()=>{
          this.back()
        })
      } catch (e) {
        this.loading = false
      }

    },
    // 重置表单
    resetForm(formName){
      this.$refs[formName].resetFields()
    },
    back(){
      this.$emit('editClose')
    }
  }
}
</script>

<style lang="scss" scoped>
//element-ui的分割线间距有点大 直接修改原来的样式
.el-divider--horizontal {
  margin: 0;
}

.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .wrap {
    padding: 20px;
  }
}

.main {
  padding: 20px;
}

</style>
